<template>
  <MyDialog
    v-model="isVisible"
    :size="'big'"
    :type="type"
    class="audit-dialog-wrapper"
    :dialog-title="dialogTitle"
    :need-modal="needModal"
    @closed="closed"
  >
    <div id="elementId" ref="printPdf" class="pdf">
      <div class="top">附件2</div>
      <div class="title">原试点期间养老保险关系接收函</div>
      <div class="small-title">永州市机关事业单位养老保险经办机构:</div>
      <div class="content">
        <div class="top" contenteditable="true">
          （
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          ）
        </div>
        在我局参保，同意接收该单位
        <div class="name" contenteditable="true">(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)</div>
        <span>
          在原试点参保期间的养老保险关系，如无不妥请按相关规定发送该单位原试点养老保险参保数据，或按规定提供原试点衔接相关资料，办理转移手续。</span
        >
        <div style="margin-top: 20pt">经办人：{{ dataForm.jbrName }}</div>
        <div>联系电话：</div>
        <div class="compy" style="margin-top: 30pt">永州市社会保险服务中心</div>
        <div class="date">年<span style="padding: 0 40px">月</span>日</div>
      </div>
    </div>

    <template #footer>
      <my-button type="reset" title="关闭" @click="closed" />
      <my-button type="save" title="导出" :loading="buttonLoading" @click="submitForm" />
    </template>
  </MyDialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getContact } from '@/api/yuanshidian/contact';
import { jsPDF } from 'jspdf';
import html2canvas from 'html2canvas';
import { formatDate } from '@/utils';
const { proxy } = getCurrentInstance();
const printPdf = ref(null);
const props = defineProps(
  {
    dialogTitle: {
      type: String,
      default: '接收函'
    },
    needModal: {
      type: Boolean,
      default: true
    },
    modelValue: {
      type: Boolean,
      default: false
    },
    currentRow: {
      type: Object,
      default: () => {}
    }
  },
  ['modelValue']
);
const dataForm = ref({
  zrdw: '',
  zcdw: '',
  name: ''
});
const buttonLoading = ref(false);
const ruleForm = ref<ElFormInstance>();
const isVisible = ref(false);
watch(
  () => props.modelValue,
  async (v) => {
    isVisible.value = v;
    if (props.currentRow.id) {
      var res = await getContact(props.currentRow.id);
      Object.keys(dataForm.value).forEach((item) => {
        dataForm.value[item] = res.data[item];
      });
    }
  },
  { immediate: true, deep: true }
);
const emit = defineEmits(['update:modelValue']);
const closed = () => {
  emit('update:modelValue');
};

/** 提交按钮 */
const submitForm = async () => {
  const input = printPdf.value;
  const canvas = await html2canvas(input, {
    scale: 1, // 可以调整这个值来改变输出的清晰度，A4 通常是 210mm x 297mm，大约是 794px x 1123px，但考虑到边距和清晰度，可能需要调整 scale 值。
    useCORS: false, // 如果你的图像资源有跨域问题，需要设置为 true
    width: 842, // A4 width in points (1/72 inch)
    windowWidth: 842, // A4 width in pixels (assuming a scale of 1)
    height: 700 // A4 height in points (1/72 inch)
  }); // 将DOM元素转换为canvas
  const imgData = canvas.toDataURL('image/png'); // 将canvas转换为图片数据URL
  const pdf = new jsPDF('p', 'pt', 'a4'); // 创建jsPDF实例
  pdf.addImage(imgData, 'PNG', 0, 0); // 将图片添加到PDF中
  pdf.save('download.pdf'); // 保存PDF文件
};
</script>
<style scoped lang="scss">
.pdf {
  margin: 0 auto;
  background-color: #fff;
  color: #000;
  width: 210mm; /* A4纸大小宽度 */
  /*  height: 297mm; A4纸大小高度 */
  padding: 20px 100px;
  box-sizing: border-box; /* 确保padding不影响布局 */
  font-size: 14pt;
  .title {
    text-align: center;
    font-size: 18pt;
    margin: 40pt 0;
  }
  .content {
    letter-spacing: 2px;
    line-height: 40pt;
    text-indent: 30pt;
    .top {
      min-width: 150px;
      text-indent: 0;
      display: inline-block;
      border-bottom: 1px solid #ccc;
    }
    .name {
      min-width: 100px;
      text-indent: 0;
      display: inline-block;
      text-align: center;
      border-bottom: 1px solid #ccc;
    }
    .compy,
    .date {
      text-align: right;
      font-size: 12pt;
      margin-right: 14px;
    }
  }
}
</style>
